<template>
  <!-- home下的合作 -->
  <div>
    <div class="banner" style="">
        <p>合作机构<span></span></p>        
    </div>
    <div class="con">
        <Title title="合作单位" text="Cooperation Unit" />
        <div class="page">
            <dl>
                <dt><img src="@/img/coporationimg/p1.jpg" alt=""></dt>
                <dd>
                    <h3><span></span>中国研究型医院学会</h3>
                    <p>广州健康集团与中国研究型医院学会达成战略合作，通过对健康大数据建模、精准算法，为广大体安智能手表用户提供健康体检报告、调理方案以及线上咨询，同时打通全国三甲诊疗服务。</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="@/img/coporationimg/p2.jpg" alt=""></dt>
                <dd>
                    <h3><span></span>广东省中药研究所</h3>
                    <p>广州省中药研究所是广州健康信息产业有限公司自成以来第一个签约的战略合作伙伴,双方强强联合就共同开展中药智能制造项目进行合作。双方充分发挥各自优势,利用智能终烤设备开展中药肿植、加工等环节智能制造研究，共同开晨中药材和食物识则系统，均制。营养吐康配伍的研究。</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="@/img/coporationimg/p3.jpg" alt=""></dt>
                <dd>
                    <h3><span></span>北京同仁堂</h3>
                    <p>广州健乐集团通过与北京同仁堂合作，依托同仁堂健全的研发技术以及生产线，共同推出推出覆盖妇科、儿科、呼吸科，五官科。骨伤科. O脑中管类疾病、补益类等几乎所有门类的保健食品，种类高达2600种,对慢性病突发疾病等进行预防干顶。</p>
                </dd>
            </dl>
        </div>
    </div>
  </div>
</template>

<script>
import Title from '../../components/Title'
export default {
    components: {
        Title
    }
};
</script>

<style lang="scss" scoped>
.banner{
    width: 100%;
    height: 600px;
    text-align: center;
    line-height: 300px;
    background: url(../../img/coporationimg/bg.png) no-repeat;
    background-size: 100%;
    p{
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 50px;
        position: relative;
        &:after{
            content: "";
            background: #fff;
            position: absolute;
            width: 80px;
            height: 4px;
            left: 50%;
            margin-left: -40px;
            top: 210px;
        }
    }
}
.con{
    background: linear-gradient(#3b62e5 200px,#1e3ba3 100%);
    z-index: 2;
    position: relative;
    padding-bottom: 240px;
    .page{
        padding-top: 50px;
    }
    &::before{
        content: "";
        position: absolute;
        width: 120%;
        height: 400px;
        border-radius: 50%;
        left: -10%;
        top: -200px;
        background: #3b62e5;
        z-index: -1;
    }
}
dl{
    display: flex;
    height: 410px;
    &:nth-child(2){
        flex-flow: row-reverse;
    }
    img{
        width: 800px;
        height: 410px;
    }
    dd{
        padding: 70px 40px;
        background: #2b45a4;
        color: #fff;
        height: 100%;
        flex: 1;
        h3{
            font-size: 30px;
            line-height: 100px;
            font-weight: 600;
            position: relative;
            span{
                position: absolute;
                width: 86px;
                height: 4px;
                background: #65fdf4;
            }
        }
        p{
            line-height: 36px;
            cursor: pointer;
            &:hover{
                color: #65fdf4;
            }
        }
    }
}
dl+dl{
    margin-top: 50px;
}
</style>